<template>
  <ant-modal
    modalWidth="1300"
    modalHeight="800"
    :visible="open"
    :modal-title="formTitle"
    :adjust-size="true"
    @cancel="cancel"
  >
    <a-form-model ref="form" :model="form" :rules="rules" slot="content" layout="vertical">
      <biz-product v-if="showProductModal" ref="bizProduct" @ok="selectProduct" @close="showProductModal = false" />
      <a-row :gutter="32">
        <a-col :span="12">
          <a-form-model-item label="领用人" prop="receiveUserId">
            <select-user
              v-model="form.receiveUserId"
              select-model="multi"
            />
          </a-form-model-item>
        </a-col>
        <a-col :span="12">
          <a-form-model-item label="领用时间" prop="receiveDate">
            <a-date-picker
              v-model="form.receiveDate"
              valueFormat="YYYY-MM-DD"
              :show-today="true"
              placeholder="选择日期"
              style="width: 100%"
            />
          </a-form-model-item>
        </a-col>
        <a-col :span="12">
          <a-form-model-item label="仓库" prop="warehouseId">
            <a-select placeholder="请选择仓库" v-model="form.warehouseId" style="width: 100%" allow-clear  @change='selectWarehouse(true)'>
              <a-select-option v-for="(d, index) in warehouseIdOptions" :key="index" :value="d.id">{{ d.warehouseName
              }}</a-select-option>
            </a-select>
          </a-form-model-item>
        </a-col>
        <a-col :span="12">
          <a-form-model-item label="备注" prop="remark">
            <a-input v-model="form.remark" placeholder="请输入备注" />
          </a-form-model-item>
        </a-col>
        <a-col :span="24">
          <a-card :bordered="false">
            <advance-table :components="drag(columns,'initDetail')" columnsTitle="initDetail" :loading="loading" rowKey="id" size="middle" :columns="columns" :data-source="form.detailList"
            :rowClassName="(row,index)=>getRowClassName(row,index)"
            :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }" :pagination="false" :bordered="true">
              <div class="table-operations" slot="button" style='margin-bottom:0px;'>
                <div class="table_title">期初明细</div>
                <a-button type="primary" @click="handleAddProduct">
                  <a-icon type="plus" />新增
                </a-button>
                  <a-button type="danger" v-if="multiple && !disabled" @click="handleDeleteRows">
                    <a-icon type="delete" />删除
                  </a-button>
              </div>
              <span slot="unitSlot" slot-scope="{record}">
                <a-select placeholder="请选择单位" v-model="record.unit" @change="unitChange($event,record,index)" :getPopupContainer="triggerNode => {
                    return triggerNode.parentNode || document.body
                  }
                  " style="width: 100%" allow-clear>
                  <a-select-option v-for="(d, index) in record.unitList" :key="index" :value="d.key">{{ d.name
                  }}</a-select-option>
                </a-select>
              </span>
              <span slot="numberSlot" slot-scope="{record}">
                <a-input type='text' placeholder="请输入" v-model="record.receiveNumber" />
              </span>
              <span slot="remarkSlot" slot-scope="{record}">
                <a-input type='text' placeholder="请输入" v-model="record.remark" />
              </span>
              
              
              <span slot="spaceIdSlot" slot-scope="{record,index}">
                  <a-form-model-item style="margin-bottom:0"  :prop="`detailList.${index}.spaceId`" :rules="rules.spaceId" :name="['tableData', index, 'name']">
                        <a-select @focus="spaceFocus(record,index)" placeholder="请选择仓位" v-model="record.spaceId" :getPopupContainer="triggerNode => {
                            return triggerNode.parentNode || document.body
                          }
                          " style="width: 100%" allow-clear @change='changeSpace($event,record,index)'>
                          <a-select-option v-for="(d, index) in record.spaceList" :key="index" :value="d.id">{{ d.postion
                            }}</a-select-option>
                        </a-select>
                  </a-form-model-item>
              </span>
            </advance-table>
          </a-card>
        </a-col>
      </a-row>
    </a-form-model>
    <template slot="footer">
      <a-button :disabled="disabled" @click="cancel">
        取消
      </a-button>
      <a-button type="primary" :disabled="disabled" @click="submitForm(true)" v-if="form.status == '1'">
        保存 
      </a-button>
    </template>
  </ant-modal>
</template>
<script>
import BizReceiveOrderEditForm from './BizReceiveOrderForm'
export default {
  ...BizReceiveOrderEditForm
}
</script>
<style lang="less" scoped>
  .table-operations,
  body tr.ant-table-expanded-row:hover .table-operations {
    padding-bottom: 8px;
    text-align: right;
  }

  .table-operations {
    margin-bottom: 16px;
  }

  .table-operations>button,
  .table-operations .ant-input-affix-wrapper {
    margin-right: 8px;
  }

  .table_title {
    float: left;
    padding-left: 8px;
    font-weight: 600;
    color: #222222;
    line-height: 30px;
  }
</style>
